// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
import moment from 'moment'
// 引入antd的组件
import {
  Form,
  Row,
  Col,
  Input,
  InputNumber,
  Table ,
  Tabs,
  DatePicker,
  Select,
  Button,
  Modal,
  Tooltip,
  Typography,
  message,
  Radio,
  Popconfirm,
  Checkbox,
  Spin
} from 'antd'
// import FileViewer from 'react-file-viewer'
// 导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// import {  isEmpty, isArray, cloneDeep, chunk, set } from 'lodash'
import Uploader from 'widget/Upload'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './commissionsEditStyle.less'

import { CollapsiblePanels } from 'widget/CollapsiblePanels'
import classnames from 'classnames/bind'
import { element } from 'prop-types'
let cx = classnames.bind(styles);

const { TextArea } = Input;
let test2;
const FormItem = Form.Item
const confirm = Modal.confirm;

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 15 },
}
const formItemLayout01 = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
}
const formItemLayout02 = {
  labelCol: { span: 3},
  wrapperCol: { span: 21 },
}

/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const commissionsEditView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFieldsAndScroll, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  let {selectedRows1,reasonModalObj,paymentMethodList,payModalObj,selectedRows,accountingModalObj,projectList,uploading,createFaymentMethodFlag,projectModalObj,actionType,id,detail,subjectList,subjectModalObj,isDisabled} = modelObj
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      dispatch({
        type: `${namespace}/selectedKeysChange`,
        payload: {selectedRowKeys,selectedRows}
      })
    },
    type: 'radio'
  };
  const rowSelection1 = {
    onChange: (selectedRowKeys, selectedRows) => {
      dispatch({
        type: `${namespace}/selectedKeysChange1`,
        payload: {selectedRowKeys,selectedRows}
      })
    },
    // getCheckboxProps: record => ({
    //     defaultChecked: record.leader === 0,
    // }),
    type: 'checkbox'
  };
  
  const columns = [
    {
      title: "序号",
      dataIndex: '',
      key: '',
      width: 80,
      render: (a, item, index, d, e, f) => {
        return index+1
      },
    },
    {
      title: '区域',
      dataIndex: 'provinceName',
      key: 'provinceName',
    },
    {
      title: '城市',
      dataIndex: 'cityName',
      key: 'cityName',
    },
    {
      title: '项目',
      dataIndex: 'pname',
      key: 'pname',
    },
    {
        title: '项目编码',
        dataIndex: 'projectCode',
        key: 'projectCode',
      },
  ]
  // 核算主体
  const columns1 = [
    {
      title: "编码",
      dataIndex: 'accEntityCode',
      key: 'accEntityCode',
    },
    {
      title: '名称',
      dataIndex: 'accEntityName',
      key: 'accEntityName',
    }
  ]

  // 表格设置
  const columns3 = [
    {
      title: '客户名称',
      dataIndex: 'customerName',
      key: 'customerName',
      fixed:'left',
      width:150
    },
    {
      title: '手机号码',
      dataIndex: 'customerMobiel',
      key: 'customerMobiel',
    },
    {
        title: '是否开通钱包',
        dataIndex: 'isqryhk',
        key: 'isqryhk',
    },
    {
    title: '置业顾问',
    dataIndex: 'userName',
    key: 'userName',
    },
    {
        title: '被推介日期',
        dataIndex: 'customerTjtime',
        key: 'customerTjtime',
        render: function (value, item, index) {
          return  item.customerTjtime?item.customerTjtime.substring(0,10):''
        }
    },
    {
        title: '认购日期',
        dataIndex: 'rgrq',
        key: 'rgrq',
        render: function (value, item, index) {
          return  item.rgrq?item.rgrq.substring(0,10):''
        }
    },
    {
    title: '签约时间',
    dataIndex: 'qyrq',
    key: 'qyrq',
    },
    {
        title: '签约房号',
        dataIndex: 'qyfh',
        key: 'qyfh',
      },
    {
        title: '业态',
        dataIndex: 'yeitai',
        key: 'yeitai',
    },
    {
        title: '成交金额',
        dataIndex: 'cjje',
        key: 'cjje',
    },
    {
        title: '佣金比例',
        dataIndex: 'zyx12',
        key: 'zyx12',
      },
    {
        title: '税前佣金金额',
        dataIndex: 'sqMoney',
        key: 'sqMoney', width: 160,
        render: function (value, item, index) {
          return <div>
          <Input value = {item.sqMoney} disabled={actionType == 'check'}
              onChange={(e) => { tableChange(e.target.value.replace(/[^\-?\d.]/g,''), 'sqMoney',index) }}
            />
        </div>
        }
      },
      {
        title: '税后佣金金额',
        dataIndex: 'shMoney',
        key: 'shMoney',
      },
      
      {
        title: '税费',
        dataIndex: 'sfMoney',
        key: 'sfMoney',
      },
      {
        title: '推荐人名称',
        dataIndex: 'partnershipName',
        key: 'partnershipName',
      },
      
      {
        title: '身份证号码',
        dataIndex: 'partnershipCardno',
        key: 'partnershipCardno',
      },
      {
        title: '推荐人手机号',
        dataIndex: 'partnershipMobile',
        key: 'partnershipMobile',
      },
      
      {
        title: '推荐人角色',
        dataIndex: 'partnershipType',
        key: 'partnershipType',
      },
      {
        title: '上级推介人姓名',
        dataIndex: 'tjrName',
        key: 'tjrName',
      },
      {
        title: '上级推介人电话',
        dataIndex: 'tjrTel',
        key: 'tjrTel',
      },
      {
        title: '是否当天成交',
        dataIndex: 'customerOndday',
        key: 'customerOndday',
        render: function (value, item, index) {
          return  item.customerOndday
        }
      },
    {
      title: '成交房源付款方式',
      dataIndex: 'paymentMethodCode',
      key: 'paymentMethodCode',
      render: function (value, item, index) {
        return <div>
          <FormItem style={{marginBottom: 0}}>
                {getFieldDecorator(`paymentMethodCode_${index}`, {
                    rules: [{
                      required: false,whitespace: true, message: '请选择成交房源付款方式'
                    }],
                    initialValue: item.paymentMethodCode,
                })(
                  <Select disabled={true}>
                        { paymentMethodList == undefined ?null:paymentMethodList.map((itemed,key)=>{
                          return <Select.Option value={itemed.paymentMethodCode} key={key}>{itemed.paymentMethodName}</Select.Option>
                        })}
                  </Select>
                )}
            </FormItem>
      </div>
      }
    },
    {
      title: '预计结佣时间',
      dataIndex: 'checkoutTime',
      key: 'checkoutTime',
      render: function (value, item, index) {
        return  item.checkoutTime?item.checkoutTime.substring(0,10):''
      }
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    }
  ];

  //修改状态
  const changeState = (payload) => {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { ...payload }
    })
  }
  // 详情页跳转
  function routerGo() {
    hashHistory.push({
      pathname: '/home/commissions/commissionsList',
      query: {}
    })
  }
  // 线下结佣
  function onOffline(){
    if(selectedRows1.length==0){
      message.warn('请选择数据')
      return false
    }
    dispatch({
      type: `${namespace}/offlineCommission`,
      payload: {}
    })
  }
  //关闭
  function onCancel(){
    routerGo()
  }
  // 保存
  function onSave() {
    validateFieldsAndScroll((err) => {
      if (err) {
        return false
      } else {
        dispatch({
          type: `${namespace}/save`,
          payload: {}
        })
      }
    })
  }
  //生成佣金明细
  function onCreate(){
    validateFieldsAndScroll((err) => {
      if (err) {
        return false
      } else {
        dispatch({
          type: `${namespace}/loadData`,
          payload: {}
        })
        createFaymentMethodFlag = true 
        changeState({createFaymentMethodFlag })
      }
    })
  }

  //批量删除选中项
  function deleteItems() {
    let arr = []
    let arr1 = [];
    if(selectedRows1.length==0){
      message.warn('请选择数据')
      return false
    }
    // if(selectedRows1.length){
    //   for(var item of selectedRows1){
    //       console.log(item);
    //     arr1.push(item.key);
    //     detail.wxyxCommissionBList = detail.wxyxCommissionBList.filter(item => item.customerId!=item.key )
    //   }
    // }
    console.log(selectedRows1);
    selectedRows1.forEach(element => {
        detail.wxyxCommissionBList = detail.wxyxCommissionBList.filter(item => (item.customerId + item.qyfh)!=(element.customerId + element.qyfh) )
        console.log(element.customerId + element.qyfh);
    });
    // detail.wxyxCommissionBList.map((item, index) => {
    //   if (arr1.indexOf(item.key) == -1) {
    //     arr.push(item)
    //   }
    // })
    // detail.wxyxCommissionBList = arr;
    console.log(detail);
    changeState({ detail })
  }
  
  //项目名称弹窗事件 
  function updateProjectName(){
    projectModalObj.visible = !projectModalObj.visible;
    changeState({ projectModalObj})
    dispatch({
      type: `${namespace}/selectProject`,
      payload: {}
    })
  }
  function confirmProject(){
    accountingModalObj.isTransferProperty = selectedRows[0]&&selectedRows[0].isTransferProperty?selectedRows[0].isTransferProperty:'0'
    accountingModalObj.projectId = selectedRows[0]&&selectedRows[0].projectId?selectedRows[0].projectId:''
    detail.projectName = selectedRows[0]&&selectedRows[0].pname?selectedRows[0].pname:''
    detail.pkProject = selectedRows[0]&&selectedRows[0].projectId?selectedRows[0].projectId:'';
    detail.zyx15 = selectedRows[0]&&selectedRows[0].cityName?selectedRows[0].cityName:'';
    detail.wxyxCommissionBList = [];
    createFaymentMethodFlag = false
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag,accountingModalObj}
    })
    dispatch({
      type: `${namespace}/selectSubject`,
      payload: {}
    })
    form.resetFields()
    updateProjectName()
  }
  //项目查询
  function searchFun(){
    dispatch({
        type: `${namespace}/selectProject`,
        payload: {}
    })
  }
  function clearFun(){
    accountingModalObj.projectName = ''
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {accountingModalObj}
    })
  }
  // 搜索
  function inputSearch (value, name) {
    let obj = {[name]: value}
    accountingModalObj = Object.assign(accountingModalObj, obj)
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {accountingModalObj}
    })
  }
   //核算主体弹窗事件 
   function updateSubjectName(){
    subjectModalObj.visible = !subjectModalObj.visible
    changeState({ subjectModalObj})
    dispatch({
      type: `${namespace}/selectSubject`,
      payload: {}
    })
  }
  function confirmSubject(){
      console.log(selectedRows)

    detail.zyx2 = selectedRows[0]&&selectedRows[0].accEntityCode?selectedRows[0].accEntityCode:''
    detail.zyx3 = selectedRows[0]&&selectedRows[0].accEntityName?selectedRows[0].accEntityName:''
    detail.wxyxCommissionBList = [];

    createFaymentMethodFlag = false
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag,accountingModalObj}
    })
    dispatch({
      type: `${namespace}/selectSubject`,
      payload: {}
    })
    form.resetFields()
    updateSubjectName()
  }
 
 
  //申请事由改变时
  function inputReasonChange(value, name){
    createFaymentMethodFlag = true
    let obj = {[name]: value}
    detail = Object.assign(detail, obj)
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag}
    })
  }
  
  //表单改变时
  function inputChange (value, name) {
    createFaymentMethodFlag = false
    let obj = {[name]: value}
    detail = Object.assign(detail, obj)
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag}
    })
  }
  function tableChange (value, name, key) {
      if(value==''){
          value='';
      }

    detail.wxyxCommissionBList.forEach((element,index) => {
        if(index == key){
            element.sqMoney = value;
            element.shMoney =value?Math.round( parseFloat(element.sqMoney)*100* 0.89)/100:0;
            element.sfMoney =value?Math.round(parseFloat(value - element.shMoney)*100)/100:0;
          }
    })
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail}
    })
  }
  function inputChangePaymentMethod(value, name){
    let obj = {[name]: value}
    payModalObj = Object.assign(payModalObj, obj)
    switch(payModalObj.paymentMethodCode){
      case "SD040201":
      payModalObj.paymentMethodName = '一次性付款';
      break;
      case "SD040202":
      payModalObj.paymentMethodName = '员工分期付款';
      break;
      case "SD040203":
      payModalObj.paymentMethodName = '商业贷款';
      break;
      case "SD040204":
      payModalObj.paymentMethodName = '公积金按揭';
      break;
      case "SD040205":
      payModalObj.paymentMethodName = '混合贷款';
      break;
      case "SD040207":
      payModalObj.paymentMethodName = '非员工全款分期付款';
      break;
      case "SD040208":
      payModalObj.paymentMethodName = '非员工首付分期付款';
      break;
      default:
    }
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {payModalObj}
    })
  }

  // 成交房源付款方式
  function updatePaymentMethod(){
    if(selectedRows1.length==0){
      message.warn('请选择数据')
      return false
    }
    payModalObj.visible = !payModalObj.visible 
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {payModalObj}
    })
  }
  function confirmPaymentMethod(){
    for(var item of detail.wxyxCommissionBList){
      for(var itemed of selectedRows1){
        if(item.key == itemed.key){
          item.paymentMethodCode = payModalObj.paymentMethodCode,
          item.paymentMethodName = payModalObj.paymentMethodName,
          item.planCommissionDate = payModalObj.planCommissionDate
        }
      }
    }
    if(selectedRows1[0].paymentMethodCode==''){
        message.warn('请选择数据')
        return false
      }
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail}
    })
    // updatePaymentMethod()

      dispatch({
        type: `${namespace}/paymentMethod`,
        payload: {}
      })
    form.resetFields();
    payModalObj.visible = !payModalObj.visible 
  }
  // 作废
  function inputChangeReason(value, name){
    let obj = {[name]: value}
    reasonModalObj = Object.assign(reasonModalObj, obj)
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {reasonModalObj}
    })
  }
  function updateReason(){
    if(selectedRows1.length==0){
      message.warn('请选择数据,且不能选二级佣金数据')
      return false
    }
    reasonModalObj.visible = !reasonModalObj.visible 
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {reasonModalObj}
    })
  }
  function confirmReason(){
    dispatch({
      type: `${namespace}/ondelete`,
      payload: {}
    })
    updateReason()
  }
  
  return (
    <div className={cx('public_listMain')}>
      <div className="functionButton">
        <Button type='primary' disabled={actionType == 'check'}  onClick={() => { onSave() }}>保存</Button>
        <Popconfirm placement="top" title={"是否确认关闭，确认后关闭页面，不保存数据。"} onConfirm={() => onCancel()} okText="确定" cancelText="取消">
          <Button>关闭</Button>
        </Popconfirm>
      </div>
      <CollapsiblePanels title="佣金汇总申请表" hideUpDownBtn={true}>
        <Row>
          <Col className="col" span={8}>
            <FormItem {...formItemLayout}
              label="项目名称">
              {getFieldDecorator('projectName', {
                initialValue: detail.projectName,
                rules: [
                  { required: true, whitespace: true, message: '请输入项目名称', },
                ],
              })(<Input disabled={actionType == 'check'} readOnly={true}
                placeholder={'请输入项目名称'}
                onChange={(e) => { inputChange(e.target.value, 'projectName') }}
                onClick={() => { updateProjectName() }}
              />)}
            </FormItem>
          </Col>
          <Col className="col" span={8}>
              <FormItem
                  {...formItemLayout}
                  label="结束日期"
                  >
                  {getFieldDecorator('enddate', {
                     rules: [{
                      required: true,message: '结束日期'
                    }],
                    initialValue: detail.enddate ? moment(detail.enddate, 'YYYY-MM-DD') : null
                  })(
                    <DatePicker disabled={actionType == 'check'||(actionType == 'edit' && isDisabled)} readOnly={true} format="YYYY-MM-DD"  onChange={(e, val) => inputChange(val, 'enddate')} />
                  )}
              </FormItem>
          </Col>
          <Col className="col" span={8}>
            <FormItem {...formItemLayout}
              label="申请事由">
              {getFieldDecorator('zyx1', {
                initialValue: detail.zyx1,
                rules: [
                  {whitespace: true, message: '请输入申请事由', },
                ],
              })(
              <Input disabled={actionType == 'check'}
              placeholder={'请输入申请事由'}
              onChange={(e) => { inputReasonChange(e.target.value, 'zyx1') }}
            />
              )}
            </FormItem>
          </Col>
         
        </Row>
        <Row>
        <Col className="col" span={8}>
            <FormItem {...formItemLayout}
            label="费控核算主体">
                {getFieldDecorator(`zyx3`, {
                    rules: [{
                      required: true,whitespace: true, message: '费控核算主体'
                    }],
                    initialValue: detail.zyx3,
                })(
                  <Input disabled={actionType == 'check'} readOnly={true}
                    placeholder={'请输入核算主体'}
                    onChange={(e) => { inputChange(e.target.value, 'zyx3') }}
                    onClick={() => { updateSubjectName() }}
                  />
                )}
            </FormItem>
          </Col>
          <Col className="col" span={8}>
            <FormItem {...formItemLayout}
              label="登记人员">
              {getFieldDecorator('username', {
                initialValue: detail.username,
              })(<Input disabled={true}
                placeholder={'登记人员'}
                onChange={(e) => { inputChange(e.target.value, 'username') }}
              />)}
            </FormItem>
          </Col>
          <Col className="col" span={8}>
              <FormItem
                  {...formItemLayout}
                  label="登记时间"
                  >
                  {getFieldDecorator('dmaketime', {
                    initialValue: detail.dmaketime ? moment(detail.dmaketime, 'YYYY-MM-DD HH:mm:ss') : null
                  })(
                    <DatePicker disabled={true} format="YYYY-MM-DD HH:mm:ss"  onChange={(e, val) => inputChange(val, 'dmaketime')} />
                  )}
              </FormItem>
          </Col>
         
        </Row>
        <Row>
        <Col className="col" span={8}>
              <FormItem
                  {...formItemLayout}
                  label="单据号"
                  >
                  {getFieldDecorator('vbillno', {
                    initialValue: detail.vbillno
                  })(
                    <Input disabled={true}
                      placeholder={'单据号'}
                      onChange={(e) => { inputChange(e.target.value, 'vbillno') }}
                    />
                  )}
              </FormItem>
          </Col>
          <Col className="col" span={8}>
            <FormItem {...formItemLayout}
              label="总佣金金额">
              {getFieldDecorator('summoneySh', {
                initialValue: detail.summoneySh,
              })(<Input disabled={true}
                placeholder={'总佣金金额'}
                onChange={(e) => { inputChange(e.target.value, 'summoneySh') }}
              />)}
            </FormItem>
          </Col>
          <Col className="col" span={8}>
              <FormItem
                  {...formItemLayout}
                  label="单据状态"
                  >
                  {getFieldDecorator('vbillstatus', {
                    initialValue: detail.vbillstatus
                  })(
                    <Input disabled={true}
                      placeholder={'单据状态'}
                      onChange={(e) => { inputChange(e.target.value, 'vbillstatus') }}
                    />
                  )}
              </FormItem>
          </Col>
         
        </Row>
        <Row>
        <Col className="col" span={8}>
              <FormItem
                  {...formItemLayout}
                  label="审批时间"
                  >
                  {getFieldDecorator('approvetime', {
                    initialValue: detail.approvetime ? moment(detail.approvetime, 'YYYY-MM-DD HH:mm:ss') : null
                  })(
                    <DatePicker disabled={true} format="YYYY-MM-DD HH:mm:ss"  onChange={(e, val) => inputChange(val, 'approvetime')} />
                  )}
              </FormItem>
          </Col>
          <Col className="col" span={8}>
            <FormItem {...formItemLayout}
              label="审批批语">
              {getFieldDecorator('approvenote', {
                initialValue: detail.approvenote,
              })(<Input disabled={true}
                placeholder={'审批批语'}
                onChange={(e) => { inputChange(e.target.value, 'approvenote') }}
              />)}
            </FormItem>
          </Col>
          <Col className="col" span={8}>
              <FormItem
                  {...formItemLayout}
                  label="资金付款时间"
                  >
                  {getFieldDecorator('zyx5', {
                    initialValue: detail.zyx5
                  })(
                    <Input disabled={true}
                      placeholder={'请输入资金付款时间'}
                      onChange={(e) => { inputChange(e.target.value, 'zyx5') }}
                    />
                  )}
              </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={16}>
            <FormItem {...formItemLayout01}
              label="备注">
              {getFieldDecorator('remark', {
                initialValue: detail.remark,
                rules: [
                  { required: false, whitespace: true, message: '', },
                ],
              })(
              <TextArea disabled={actionType == 'check'} style={{width:'97.6%'}} onChange={e=>{inputReasonChange(e.target.value,'remark')}}></TextArea>
              )}
            </FormItem>
          </Col>
        </Row>
        </CollapsiblePanels>
        <CollapsiblePanels title="佣金申请单明细">
        <div className={cx('commissions_info')}>
            <div className={cx('commissions_info_but')}>
                <Button disabled={actionType == 'check'}  className={cx('margin_right_20')} onClick={() => {updatePaymentMethod('付款方式')}}>成交房源付款方式</Button>
                <Button disabled={actionType == 'check'}  className={cx('margin_right_20')} onClick={() => {onCreate('生成')}}>生成佣金明细</Button>
                <Button disabled={actionType == 'check'} className={cx('margin_right_20')} onClick={() => {onOffline()}}>已线下结佣</Button>
                <Button disabled={actionType == 'check'} className={cx('margin_right_20')} onClick={() => {deleteItems('删除') }}>删除</Button>
                <Button disabled={actionType == 'check'} className={cx('margin_right_20')} onClick={() => {updateReason('作废') }}>作废</Button>
            </div>
            <div className="detailsTab">
                  <Table rowKey={(item, index) => {
                    return item.customerId + item.qyfh
                    }} rowSelection={rowSelection1}  pagination={false} columns={columns3} dataSource={detail.wxyxCommissionBList} scroll={{ x: 3600 }} />
            </div>
        </div>
      </CollapsiblePanels>
      {/* 项目名称弹窗 */}
      <Modal
        title={'所属项目'}
        width='1000px'
        visible={projectModalObj.visible}
        destroyOnClose={true}
        onCancel={() => { updateProjectName() }}
        onOk={() => { confirmProject() }}
      >
        <div style={{marginBottom:'12px'}}>
            <Row>
            <Col span={2} style={{lineHeight:'28px'}}>
            <label>项目名称</label>:
            </Col>
            <Col span={6} style={{marginRight:'10px'}}>
            <Input  value ={accountingModalObj.projectName} placeholder="请输入项目名称" onChange={(e) => { inputSearch(e.target.value, 'projectName') }}/>
            </Col>
            <Col span={8}></Col>
            <Col span={6}>
                <Button type='primary' onClick={() => {searchFun()}}>查询</Button>
                <Button style={{marginLeft: '12px'}} onClick={() => {clearFun()}}>重置</Button>
            </Col>
            </Row>
        </div>     
        <div>
            <Table rowKey={(item, index) => {
                    return item.projectId
            }}  rowSelection={rowSelection} columns={columns} dataSource={projectList} type={'radio'}/>
        </div>
      </Modal>
      {/* 核算主体弹窗 */}
      <Modal
        title={'核算主体'}
        width='1000px'
        visible={subjectModalObj.visible}
        destroyOnClose={true}
        onCancel={() => { updateSubjectName() }}
        onOk={() => { confirmSubject() }}
      >
        <div>
            <Table rowKey={(item, index) => {
                    return item.accEntityCode
            }}  rowSelection={rowSelection} columns={columns1} dataSource={subjectList} type={'radio'}/>
        </div>
      </Modal>
      {/* 添加支付方式弹窗 */}
      <Modal
        title={'添加支付方式'}
        width='600px'
        visible={payModalObj.visible}
        destroyOnClose={true}
        onCancel={() => { updatePaymentMethod() }}
        onOk={() => { confirmPaymentMethod() }}
      >
        <div>
          <Row>
            <Col className="col" span={20}>
              <FormItem label='请选择支付方式'  {...formItemLayout}>
                  {getFieldDecorator('paymentMethodCode', {
                      rules: [{
                          required: false,whitespace: true, message: '请选择支付方式'
                      }],
                      initialValue: detail.paymentMethodCode                    
                  })(
                    <Select disabled={actionType == 'check'} placeholder='请选择支付方式' onChange={(e)=>{inputChangePaymentMethod(e,'paymentMethodCode')}}>
                        { paymentMethodList == undefined ?null:paymentMethodList.map((itemed,key)=>{
                          return <Select.Option value={itemed.paymentMethodCode} key={key}>{itemed.paymentMethodName}</Select.Option>
                        })}
                    </Select>
                  )}
              </FormItem>
            </Col>  
          </Row>
          <Row>
            <Col className="col" span={20}>
                <FormItem
                    {...formItemLayout}
                    label="预计结佣日期"
                    >
                    {getFieldDecorator('planCommissionDate', {
                      initialValue: detail.planCommissionDate ? moment(detail.planCommissionDate, 'YYYY-MM-DD HH:mm:ss') : null
                    })(
                      <DatePicker  format="YYYY-MM-DD HH:mm:ss"  onChange={(e, val) => inputChangePaymentMethod(val, 'planCommissionDate')} />
                    )}
                </FormItem>
            </Col>
          </Row>
        </div>
      </Modal>
      <Modal
        title={'作废原因'}
        width='600px'
        visible={reasonModalObj.visible}
        destroyOnClose={true}
        onCancel={() => { updateReason() }}
        onOk={() => { confirmReason() }}
      >
        <div>
          <Row>
            <Col className="col" span={24}>
              <FormItem label='请选择作废原因查询'  {...formItemLayout}>
                  {getFieldDecorator('Reason', {
                      rules: [{
                          required: false,whitespace: true, message: '请选择作废原因查询'
                      }],
                      initialValue: detail.Reason                    
                  })(
                    <Select disabled={actionType == 'check'} placeholder='请选择作废原因查询' onChange={(e)=>{inputChangeReason(e,'Reason')}}>
                        <Select.Option value='员工直系亲属购房不符合美的置业云结佣政策'>员工直系亲属购房不符合美的置业云结佣政策</Select.Option>
                        <Select.Option value='营销部直系亲属推荐本盘项目不符合美的置业云结佣政策'>营销部直系亲属推荐本盘项目不符合美的置业云结佣政策</Select.Option>
                        <Select.Option value='核查后客户成交途径非美的置业云不符合美的置业云结佣政策'>核查后客户成交途径非美的置业云不符合美的置业云结佣政策</Select.Option>
                        <Select.Option value='熟悉美的置业云阶段时做测试的单位改房源不参与美的置业云活动'>熟悉美的置业云阶段时做测试的单位改房源不参与美的置业云活动</Select.Option>
                        <Select.Option value='客户成交异常第一来访途径非美的置业云'>客户成交异常第一来访途径非美的置业云</Select.Option>
                        <Select.Option value='报备后客户提前到访，未过防截时间，不符合结佣规则'>报备后客户提前到访，未过防截时间，不符合结佣规则</Select.Option>
                        <Select.Option value='其他'>其他</Select.Option>
                        <Select.Option value='报备时间晚于到访时间，不符合结佣规则'>报备时间晚于到访时间，不符合结佣规则</Select.Option>
                        <Select.Option value='成交房源不符合美的置业云结佣规则'>成交房源不符合美的置业云结佣规则</Select.Option>
                    </Select>
                  )}
              </FormItem>
            </Col>  
          </Row>
        </div>
      </Modal>
      {uploading&&<div style={{position: "fixed",width: "100%",height: "100%",background: "rgba(204, 204, 204,.6)",zIndex: 9999999,top: "62px",textAlign: 'center',paddingTop:'200px',left:'168px'}}>
        <Spin tip="系统正在处理..."></Spin>
      </div>}
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(commissionsEditView))
